import { Component } from 'react'
import Message from './components/Message.js'
import Footer from './components/Footer.js'
import './App.css';
export default class App extends Component{
  state = {
    nickname: '',
    message: '',
    messageList: [],
    isSelectAll: false,
    selectCount:0,
  }
  addMessage = () => {
    const {messageList,nickname,message} = this.state;
    messageList.push({
      id: Date.now(),
      done:false,
      nickname: nickname,
      message:message,
    })
    this.setState({
      messageList: messageList,
      nickname: '',
      message: '',
      isSelectAll: false,
    })
  }

  delMessage = (id) => {
    const { messageList } = this.state
    this.setState({
      messageList:messageList.filter(item=>item.id!==id)
    })
  }
  editMessage = (id,content) => {
    const { messageList } = this.state;
    for (let i = 0; i < messageList.length;i++){
      if (id === messageList[i].id) {
        messageList[i] = {
          ...messageList[i],
          message: content,
        }
      }
    }
    this.setState({
      messageList,
    })

  }

  changeDone = (id, done) => {
    const { messageList } = this.state
    let isSelectAll = true;
    let selectCount = 0;
    for (let i = 0; i < messageList.length;i++){
      if (id === messageList[i].id) {
        messageList[i] = {
          ...messageList[i],done
        }
      }
      isSelectAll = (isSelectAll && messageList[i].done)
      if (messageList[i].done) {
        selectCount++
      }
    }
    this.setState({
      messageList,
      isSelectAll,
      selectCount
    })
  }

  changeIsSelectedAll = (done) => {
    const { messageList } = this.state
    for (let i = 0; i < messageList.length;i++){
      messageList[i] = {
        ...messageList[i],done,
      };
    }
    let selectCount = done?messageList.length:0;
    this.setState({
      messageList,
      selectCount,
      isSelectAll:done,
    })
  }
  removeSelected = () => {
    const { messageList } = this.state;
    this.setState({
      messageList:messageList.filter((item)=>!item.done),
    })
  }
  render() {
    const { message,nickname,messageList,isSelectAll ,selectCount} = this.state;
    return (
      <section className="wrap">
        <h2 className="title">留言板</h2>
        <div className="addMessage">
            <input type="text" placeholder="请输入昵称" value={nickname} onChange={({target}) => {
              this.setState({
                nickname:target.value,
              })
            } }/>
            <textarea placeholder="请输入留言" value={message} onChange={({ target }) => {
              this.setState({
                message:target.value,
              })
            }}></textarea>
            <button onClick={this.addMessage}>提交留言</button>
        </div>
        <ul className="messageList">
          {messageList.map((item, index) => <Message delMessage={this.delMessage} changeDone={this.changeDone} editMessage={this.editMessage} message={item} key={ index }/>)}
        </ul>
        
        <Footer removeSelected={ this.removeSelected } isSelectAll={ isSelectAll } selectCount={selectCount} messageLength={messageList.length} changeIsSelectedAll={ this.changeIsSelectedAll }/>
      </section>
    )
  }
}